<!DOCTYPE html>  
<html lang="zh-cn">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>  
</head>  
<body>  
  <ul>  
    <li>1</li>  
    <li>2</li>  
    <li>3</li>  
    <li>4</li>  
    <li>5</li>  
    <li>6</li>  
  </ul>  
  <style>  
  ul{  
    position:relative;  
    height:300px;  
    width:300px;  
    list-style:none;  
    margin:100px auto;  
    transform-style:preserve-3d;  
    animation:ani 4s linear 0s infinite;  
  }  
  ul:hover{
    animation-play-state: paused;
  }
  li{  
    position:absolute;  
    height:300px;  
    width:300px;  
    font-size:5em;  
    text-align:center;  
    line-height:300px;  
    backface-visibility: hidden;  
  }  
  li:nth-child(1){  
    background-color: green;  
    transform: translateZ(150px);   
  }  
  li:nth-child(2){  
    background-color:yellow;  
    transform: rotateY(90deg) translateZ(150px);  
  }  
  li:nth-child(3){  
    background-color:orange;  
    transform: rotateX(90deg) translateZ(150px);  
  }  
  li:nth-child(4){  
    background-color:red;  
    transform: rotateX(-90deg) translateZ(150px);  
  }  
  li:nth-child(5){  
    background-color:blue;  
    transform: rotateY(-90deg) translateZ(150px);    
  }  
  li:nth-child(6){  
    background-color:purple;  
    transform: rotateX(180deg) translateZ(150px);  
  }  
  
  @keyframes ani{  
      
    100%{  
      transform:rotateY(360deg) ;  
    }  
  }  
  </style>  
  
</body>  
</html>